<!--
 * 字典类型详情查看弹窗
 * 用于展示字典类型的详细信息
-->

<template>
  <a-modal
    v-model:open="modalVisible"
    title="字典类型详情"
    width="800px"
    :footer="null"
    @cancel="closeModal"
  >
    <div class="detail-content">
      <a-descriptions 
        :column="2" 
        bordered 
        size="middle"
        :labelStyle="{ width: '120px', fontWeight: '600' }"
      >
        <a-descriptions-item label="字典名称">
          <span class="dict-name">{{ itemDetail.dictName }}</span>
          <a-tag v-if="itemDetail.isSystem === 1" color="orange" size="small" class="system-tag">
            系统内置
          </a-tag>
        </a-descriptions-item>
        
        <a-descriptions-item label="字典类型">
          <a-tag color="blue" class="dict-type-tag">{{ itemDetail.dictType }}</a-tag>
        </a-descriptions-item>
        
        <a-descriptions-item label="字典描述" :span="2">
          <span class="dict-desc">{{ itemDetail.dictDesc || '-' }}</span>
        </a-descriptions-item>
        
        <a-descriptions-item label="状态">
          <a-tag :color="itemDetail.status === 1 ? 'success' : 'error'">
            {{ itemDetail.status === 1 ? '启用' : '禁用' }}
          </a-tag>
        </a-descriptions-item>
        
        <a-descriptions-item label="排序">
          <span class="sort-order">{{ itemDetail.sortOrder }}</span>
        </a-descriptions-item>
        
        <a-descriptions-item label="创建时间">
          <span class="time-text">{{ formatDateTime(itemDetail.createdTime) }}</span>
        </a-descriptions-item>
        
        <a-descriptions-item label="更新时间">
          <span class="time-text">{{ formatDateTime(itemDetail.updatedTime) }}</span>
        </a-descriptions-item>
        
        <a-descriptions-item label="创建人">
          <span>{{ itemDetail.createdBy || '-' }}</span>
        </a-descriptions-item>
        
        <a-descriptions-item label="更新人">
          <span>{{ itemDetail.updatedBy || '-' }}</span>
        </a-descriptions-item>
      </a-descriptions>
      
      <!-- 操作按钮区域 -->
      <div class="action-section">
        <a-space>
          <a-button 
            type="primary" 
            @click="handleEdit" 
            :disabled="itemDetail.isSystem === 1"
          >
            <EditOutlined /> 编辑
          </a-button>
          <a-button @click="handleManageDictData">
            <DatabaseOutlined /> 管理字典数据
          </a-button>
          <a-button @click="closeModal">
            关闭
          </a-button>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { EditOutlined, DatabaseOutlined } from '@ant-design/icons-vue';
import type { SysDictType } from "./types";

const router = useRouter();
const modalVisible = ref(false);
const itemDetail = ref<Partial<SysDictType>>({});

// 定义事件
const emit = defineEmits<{
  edit: [item: SysDictType];
}>;

// 打开弹窗
function openModal(item: SysDictType) {
  itemDetail.value = { ...item };
  modalVisible.value = true;
}

// 关闭弹窗
function closeModal() {
  modalVisible.value = false;
  itemDetail.value = {};
}

// 编辑操作
function handleEdit() {
  if (itemDetail.value.isSystem === 1) {
    return;
  }
  emit('edit', itemDetail.value as SysDictType);
  closeModal();
}

// 管理字典数据
function handleManageDictData() {
  if (!itemDetail.value.dictType) return;
  
  router.push({
    path: '/admin/miaoma/sysdictdata/list',
    query: {
      dictType: itemDetail.value.dictType,
      dictTypeName: itemDetail.value.dictName,
      dictTypeId: itemDetail.value.id
    }
  });
  closeModal();
}

// 格式化日期时间
function formatDateTime(dateTime: string | undefined): string {
  if (!dateTime) return '-';
  return new Date(dateTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
}

defineExpose({ openModal });
</script>

<style scoped>
.detail-content {
  padding: 16px 0;
}

.dict-name {
  font-weight: 600;
  color: #1890ff;
  font-size: 16px;
}

.system-tag {
  margin-left: 8px;
}

.dict-type-tag {
  font-family: 'Courier New', monospace;
  font-weight: 600;
}

.dict-desc {
  color: #666;
  line-height: 1.6;
}

.sort-order {
  font-weight: 600;
  color: #722ed1;
}

.time-text {
  color: #666;
  font-size: 13px;
  font-family: 'Courier New', monospace;
}

.action-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  text-align: right;
}

/* 描述列表样式优化 */
:deep(.ant-descriptions-item-label) {
  background-color: #fafafa;
  color: #262626;
}

:deep(.ant-descriptions-item-content) {
  background-color: #ffffff;
}

:deep(.ant-descriptions-bordered .ant-descriptions-item-label) {
  text-align: right;
}

/* 标签样式 */
:deep(.ant-tag) {
  border-radius: 4px;
  font-weight: 500;
}

/* 按钮样式 */
.action-section .ant-btn {
  margin-left: 8px;
}

.action-section .ant-btn:first-child {
  margin-left: 0;
}
</style>